<script setup>
import {onMounted ,ref,computed} from 'vue'
import axios from 'axios';
let prop= defineProps(['zhi'])
let emit= defineEmits(['update:zhi'])
let list =ref({});   
function getData(){
    axios.get('/api/permission_list').then(res=>{ 
        if(res.data.status==200){
            list.value = changeDate(res.data.data);

        }else{
            showMsg("获取数据失败",'error',2000);
        }
    })
}

function changeDate(arr){
    let res={};
    for (let i = 0; i < arr.length; i++) {
        if(arr[i].type in res){
            res[arr[i].type].push(arr[i]);
        }else{
            res[arr[i].type] = [arr[i]];
        }
        
    }
    return res;
}
onMounted(()=>{
    getData();
})
let val=ref(prop.zhi.split(','))
function fa(){
    // console.log(val.value);
    
    emit('update:zhi',val.value.join(','))
}
</script>
<template>
<div class="permit">
   <template v-for="(item,index) in list" :key="index">
    <div class="titile">{{ index }}</div>
    <ul class="list">
        <li v-for="it in item" :key="it.id">
            <input type="checkbox" :value="it.id" v-model="val" @change="fa"/>{{ it.permitName }}
        </li>
    </ul>
   </template>
</div>
</template>
<style scoped>
.permit{
    width: 100%;
    height: 80px;
    overflow-y: auto;
}
.permit::-webkit-scrollbar{
    width: 3px;
}
.permit::-webkit-scrollbar-thumb{
    background-color: #099;
}
</style>